<template>
    <div>
        <table>
            <tbody>
                <tr>
                    <td>所属项目</td>
                    <td><input type="text" v-model="quinfor.houseXm"></td>
                </tr>
                <tr>
                    <td>户型名称</td>
                    <td><input type="text" v-model="quinfor.houseName"></td>
                </tr>
                <tr>
                    <td>户型结构</td>
                    <td>
                        <select v-model="quinfor.houseType">
                            <option value="">请选择</option>
                            <option value="两居室">两居室</option>
                            <option value="三居室">三居室</option>
                            <option value="单居室">单居室</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>装修标准</td>
                    <td><input type="text" v-model="quinfor.houseBz"></td>
                </tr>
                <tr>
                    <td>建筑面积</td>
                    <td><input type="number" v-model="quinfor.houseArea"></td>
                </tr>
                <tr>
                    <td>套内面积</td>
                    <td><input type="number" v-model="quinfor.area"></td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td><input type="file" @change="Img">
                    <img :src="quinfor.photo" alt="" width="50" height="50" v-if="quinfor.photo!=''">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="修改" @click="ok()"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { idText } from 'typescript';
import { ref,reactive ,onMounted } from 'vue';
import { useRoute ,useRouter} from 'vue-router';
const route=useRoute();
const router=useRouter();

let quinfor:any=reactive({
    "id":route.query.id,
  "houseXm": "",
  "houseName": "",
  "houseType": "",
  "houseBz": "",
  "houseArea": "",
  "area": "",
  "photo": "",
  
})
const Img=(e:any)=>{
    
    var obj =e.target.files[0];
    let f=new FormData();
    f.append("file",obj)
    axios({
        url:'/api/Img/Imgs',
        method:'post',
        data:f
    })
    .then(res=>{
       
        quinfor.photo=res.data
        if(res.data=="文件格式不正确")
    {
         alert("文件格式不正确")
         return;
    }
    })
}
onMounted(()=>{
    ft();
})
const ft=()=>{
    axios({
        url:'/api/House/Houseft',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(quinfor,res.data)
    })
}
const ok=()=>{
if(quinfor.houseName=="")
{
    alert("户型名称不能为空")
    return;
}
if(quinfor.houseType=="")
{
    alert("户型结构不能为空")
    return;
}
if(quinfor.houseArea=="")
{
    alert("建筑面积不能为空")
    return;
}
if(quinfor.houseArea<60||quinfor.houseArea>300)
{
    alert("建筑面积不得小于60,不得大于300")
    return;
}
if(quinfor.area=="")
{
    alert("套内面积不能为空")
    return;
}
if(quinfor.area>quinfor.houseArea)
{
    alert("套内面积必须小于建筑面积")
    return;
}


    axios({
        url:'/api/House/HouseUpd',
        method:'put',
        data:quinfor
    })
    .then(res=>{
        if(res.data>0)
    {
        alert("修改成功");
        router.push('/houseShow')
        return;
    }
    else
    {
        alert("修改失败")
        return;
    }
    })
}
</script>

<style scoped>

</style>